<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/cesium/1.83.0/Cesium.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/cesium/1.83.0/Widgets/widgets.css" rel="stylesheet">
  </head>
  <body>
    <!-- <div id="app"></div> -->
    <div id="cesiumContainer"></div>
    <script type="module">
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhNjI2NjEyNC1lODhhLTRiZjAtODVlZS1kOTc0ODVkMjAzMmYiLCJpZCI6MzczOTgsImlhdCI6MTYxNzE3NDc0M30.5Cq25yb9eJDeaCRXPXVf6YiEobi-KHLVi1YXryjRLIs';
  
      import DK from './dist/cesiummaterial.es.js'
   
      var viewer = new Cesium.Viewer('cesiumContainer')
      
      let hander = new Cesium.ScreenSpaceEventHandler(viewer.canvas)

      let startCoord , endCoord
      var clickAgain = false
      hander.setInputAction((movement) => {
        let pick = movement.position
        if(!clickAgain){
          clickAgain = true
          startCoord = DK.Transform.WindowCoordToCartesian3(viewer,pick)
          viewer.entities.add({
            name : 'tubiaodian1',
            position : startCoord,
            point : {
              pixelSize : 10,
              color : Cesium.Color.RED
            },
            label : {
              text : '起点'
            }
          })
          return
        }

        if(clickAgain){
          endCoord = DK.Transform.WindowCoordToCartesian3(viewer,pick)
          viewer.entities.add({
            position : endCoord,
            point : {
              pixelSize : 10,
              color : Cesium.Color.RED
            },
            label : {
              text : '终点'
            }
          })
          startCoord = DK.Transform.Cartesian3ToWGS84(viewer , startCoord)
          endCoord = DK.Transform.Cartesian3ToWGS84(viewer , endCoord)
          
          DK.getGCJPolyline(startCoord , endCoord , (path) => {
            console.log(path)
            path.forEach(item => {
              let polylines = DK.parseGCJPolyline(item)
              console.log(polylines)
              let ds = viewer.entities.add({
                polyline : {
                  positions : new Cesium.Cartesian3.fromDegreesArray(polylines),
                  width: 10,
                  material : new DK.PolylineTrailMaterialProperty({
                    color : Cesium.Color.DEEPSKYBLUE,
                    speed : 10
                  })
                }
              })
            })
          })
            
          hander.destroy()
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    </script>
  </body>
</html>
